<template>
  <div class="showLoading items-center" @click.stop="">
    <van-loading
      v-if="type === 'defaults'"
      :size="size"
      :text-size="textSize"
      :text-color="textSize"
      :color="color"
      vertical
    >
      加载中... {{ type }}
    </van-loading>
    <Vue3Lottie
      v-else-if="type === 'animation' && AstronautJSON"
      :width="lottieWidth"
      :animationData="AstronautJSON"
      :autoPlay="true"
      :pauseAnimation="false"
    />
    <van-loading v-else vertical>
      <template #icon>
        <img src="/image/mvp/bdc.png" />
      </template>
      请稍等
    </van-loading>
  </div>
</template>
<script lang="ts" setup name="showLoading">
import { Vue3Lottie } from "vue3-lottie";
import { useFetch as http } from "@vueuse/core";

const props = withDefaults(
  defineProps<{
    // 类型
    type?: string;
    textSize?: string;
    textColor?: string;
    size?: string;
    color?: string;
  }>(),
  {
    type: "defaults",
  }
);

// 动画宽
const lottieWidth = ref(60);
const AstronautJSON = ref();
onMounted(() => {
  http('https://bdc.btcdana.org/fx/lottie/pullRefresh.json').then((res) => {
    if (res.data.value)
      AstronautJSON.value = JSON.parse(res.data.value as string);
  });
});
</script>
<style lang="scss">
.showLoading {
  z-index: 999999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  &-loading {
  }
}
</style>
